<template>
	<view class="userLayout pageBg">


		<custom-nav-bar title="我的"></custom-nav-bar>

		<!-- 用户信息卡片 -->
		<view class="user-card" :class="{'logged-in': isLogin}">
			<view class="card-bg"></view>
			<view class="card-content">
				<!-- 未登录状态 -->
				<navigator v-if="!isLogin" url="/pages/login/login" class="login-navigator">
					<uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
					<text>登录纸境，解锁指尖的诗意</text>
					<view class="arrow-icon">
						<uni-icons type="arrow-right" size="16" color="#fff"></uni-icons>
					</view>
				</navigator>

				<!-- 已登录状态 -->
				<view v-else class="user-info" @click="setFunc">
					<view class="avatar-wrapper">
						<image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
						<view class="avatar-badge">
							<uni-icons type="camera-filled" size="14" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="user-detail">
						<view class="username">{{ userInfo.username }}</view>
						<view class="user-desc">纸境壁纸收藏家</view>
					</view>
					<view class="edit-icon">
						<uni-icons type="compose" size="18" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 纸境小贴士卡片 -->
		<view class="tips-card">
			<view class="card-title">
				<uni-icons type="notification" size="18" color="#8c7b6e"></uni-icons>
				<text>今日纸境小贴士</text>
			</view>
			<view class="tips-content">
				<view class="tip-item">
					<uni-icons type="compose" size="16" color="#33c88b"></uni-icons>
					<text>滑动间都是指尖的小确幸</text>
				</view>
				<view class="tip-item">
					<uni-icons type="eye" size="16" color="#1e80ff"></uni-icons>
					<text>每次点亮，都像拆开一封来自自然的信</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-card">
			<navigator url="/pagesMember/download/download" hover-class="menu-item-hover" class="menu-item">
				<view class="menu-left">
					<view class="menu-icon" style="background-color: #33c88b20;">
						<uni-icons type="paperclip" size="20" color="#33c88b"></uni-icons>
					</view>
					<text class="menu-text">我的纸境收藏</text>
				</view>
			</navigator>

			<navigator url="/pagesMember/rate/rate" hover-class="menu-item-hover" class="menu-item">
				<view class="menu-left">
					<view class="menu-icon" style="background-color: #ffb40020;">
						<uni-icons type="star" size="20" color="#ffb400"></uni-icons>
					</view>
					<text class="menu-text">纸境评分</text>
				</view>
			</navigator>

			<navigator url="/pagesMember/posts/posts" hover-class="menu-item-hover" class="menu-item">
				<view class="menu-left">
					<view class="menu-icon" style="background-color: #ffb40020;">
						<uni-icons type="mail-open" size="20" color="#ffb400"></uni-icons>
					</view>
					<text class="menu-text">我的帖子</text>
				</view>
			</navigator>

			<view hover-class="menu-item-hover" class="menu-item">
				<view class="menu-left">
					<view class="menu-icon" style="background-color: #1e80ff20;">
						<uni-icons type="chat" size="20" color="#1e80ff"></uni-icons>
					</view>
					<text class="menu-text">纸境客服</text>
				</view>
				<!-- #ifdef MP -->
				<button class="contact-button" open-type="contact">
					<text>联系客服</text>
					<uni-icons type="arrow-right" size="16" color="#8c7b6e"></uni-icons>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<button class="contact-button" @click="clickContact">
					<text>拨打电话</text>
					<uni-icons type="arrow-right" size="16" color="#8c7b6e"></uni-icons>
				</button>
				<!-- #endif -->
			</view>
		</view>


		<!-- 底部退出登录按钮 -->
		<view v-if="isLogin" class="logout-container">
			<button class="logout-btn" @click="handleLogout">
				<text>退出纸境</text>
				<uni-icons type="redo" size="16" color="#8c7b6e"></uni-icons>
			</button>
		</view>

		<!-- 信息完善弹窗 -->
		<uni-popup ref="popup" type="bottom" border-radius="16" background-color="#fff">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">完善纸境信息</text>
					<text class="popup-subtitle">让您的纸境体验更加个性化</text>
				</view>

				<view class="popup-body">
					<view class="avatar-section">
						<text class="label">纸境头像</text>
						<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
							hover-class="none">
							<image class="avatar-preview" :src="userList.avatar"></image>
							<view class="avatar-edit">
								<uni-icons type="camera" size="20" color="#fff"></uni-icons>
							</view>
						</button>
					</view>

					<view class="nickname-section">
						<view class="flex">
							<text class="label">纸境昵称</text>
							<input class="nickname-input" type="nickname" v-model="userList.nickname"
								placeholder="输入您在纸境的昵称" placeholder-style="color:#999">
						</view>
					</view>
				</view>

				<view class="popup-footer">
					<button class="cancel-btn" @click="closePopup">取消</button>
					<button class="submit-btn" @click="userSubmit">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getNavBarHeight
	} from "@/utils/system.js"
	import {
		ref,
		reactive,
		onMounted
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"

	import {
		apiUserInfo,
		apiGetScoreList
	} from "@/api/apis.js"

	// 登录状态
	const isLogin = ref(false)
	const userInfo = ref({})
	const popup = ref()

	// 页面加载时检查 token 和用户信息并获取地理位置
	onMounted(() => {
		checkLoginStatus()
	})

	onShow(() => {
		checkLoginStatus()
	})

	const checkLoginStatus = () => {
		let user;
		let token;
		// #ifdef MP
		token = uni.getStorageSync("token")
		user = uni.getStorageSync("userInfo")
		// #endif

		// #ifndef MP
		user = JSON.parse(uni.getStorageSync("userInfo") || "{}");
		token = user.token
		// #endif


		if (token && user && user.username) {
			isLogin.value = true
			userInfo.value = {
				...user
			} // 防止引用污染
		} else {
			isLogin.value = false
			userInfo.value = {}
		}
	}

	// 表单数据（用于弹窗）
	const userList = reactive({
		avatar: "",
		nickname: ""
	})

	// 选择头像
	const onChooseavatar = (e) => {

		uni.uploadFile({
			url: 'http://localhost:9090/files/upload',
			filePath: e.detail.avatarUrl,
			name: 'file',
			success: (res) => {
				let data;
				data = JSON.parse(res.data)
				if (data.code === "200") {
					userList.avatar = data.data
				}
			}
		})

	};

	// 修改昵称
	const changeName = (e) => {
		userList.nickname = e.detail.value;
	};


	// 打开弹窗：回显当前用户信息

	// #ifdef MP
	const setFunc = () => {
		if (!isLogin.value) return
		userList.nickname = userInfo.value.nickname || userInfo.value.username || ''
		userList.avatar = userInfo.value.avatar || ''
		popup.value.open()
	}
	// #endif


	// 关闭弹窗
	const closePopup = () => {
		popup.value.close()
	}

	// 提交表单
	const userSubmit = () => {

		const update = {
			avatar: userList.avatar,
			username: userList.nickname.trim(),
			openid: userInfo.value.openid // 假设 userInfo 中有 openid
		}

		const res = apiUserInfo(update)

		const updatedUserInfo = {
			...userInfo.value, // 保留所有原始字段
			avatar: userList.avatar, // 覆盖新头像
			username: userList.nickname.trim() // 覆盖新昵称
		}

		// 4. 更新本地缓存
		uni.setStorageSync('userInfo', updatedUserInfo)


		// 5. 更新响应式数据，使页面刷新
		userInfo.value = updatedUserInfo

		popup.value.close()

	}

	const clickContact = () => {
		uni.makePhoneCall({
			phoneNumber: "18734965649"
		})
	}

	const handleLogout = () => {
		uni.clearStorageSync()

		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style scoped lang="scss">
	/* 基础变量 */
	:root {
		--primary-color: #8c7b6e;
		--secondary-color: #d4b999;
		--text-dark: #5a3e36;
		--text-light: #8c7b6e;
		--bg-color: #f9f5f0;
		--card-bg: #fff;
		--success-color: #33c88b;
		--warning-color: #ffb400;
		--info-color: #1e80ff;
	}

	/* 页面基础样式 */
	.userLayout {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: var(--bg-color);
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;
	}

	/* 用户卡片 */
	.user-card {
		margin: 20rpx 30rpx 40rpx;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 8rpx 24rpx rgba(90, 62, 54, 0.08);
		transition: all 0.3s ease;

		&.logged-in {
			height: 240rpx;
		}

		.card-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e1330 100%);
			opacity: 0.9;
		}

		.card-content {
			position: relative;
			z-index: 2;
			padding: 40rpx;
			height: 100%;
		}

		.login-navigator {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			height: 100%;

			uni-icons {
				margin-right: 16rpx;
			}

			.arrow-icon {
				margin-left: 16rpx;
				opacity: 0.7;
			}
		}

		.user-info {
			display: flex;
			align-items: center;
			height: 100%;

			.avatar-wrapper {
				position: relative;
				margin-right: 30rpx;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
					box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
				}

				.avatar-badge {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 36rpx;
					height: 36rpx;
					background-color: var(--primary-color);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #fff;
				}
			}

			.user-detail {
				flex: 1;

				.username {
					font-size: 36rpx;
					color: #fff;
					font-weight: 600;
					margin-bottom: 8rpx;
				}

				.user-desc {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					font-style: italic;
				}
			}

			.edit-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	/* 小贴士卡片 */
	.tips-card {
		background-color: var(--card-bg);
		border-radius: 24rpx;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(90, 62, 54, 0.05);
		border: 1rpx solid rgba(212, 185, 153, 0.3);

		.card-title {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			uni-icons {
				margin-right: 12rpx;
			}

			text {
				font-size: 28rpx;
				color: var(--text-dark);
				font-weight: 500;
			}
		}

		.tips-content {
			.tip-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					padding-bottom: 0;
				}

				&:not(:last-child) {
					border-bottom: 1rpx dashed rgba(140, 123, 110, 0.2);
				}

				uni-icons {
					margin-right: 16rpx;
					flex-shrink: 0;
				}

				text {
					font-size: 26rpx;
					color: var(--text-dark);
					line-height: 1.6;
				}
			}
		}
	}

	/* 菜单卡片 */
	.menu-card {
		background-color: var(--card-bg);
		border-radius: 24rpx;
		margin: 0 30rpx 40rpx;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(90, 62, 54, 0.05);
		border: 1rpx solid rgba(212, 185, 153, 0.3);
		overflow: hidden;

		.menu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			position: relative;

			&:not(:last-child) {
				border-bottom: 1rpx solid rgba(212, 185, 153, 0.2);
			}

			.menu-left {
				display: flex;
				align-items: center;

				.menu-icon {
					width: 48rpx;
					height: 48rpx;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
				}

				.menu-text {
					font-size: 30rpx;
					color: var(--text-dark);
					font-weight: 500;
				}
			}

			.contact-button {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;

				&::after {
					border: none;
				}
			}
		}

		.menu-item-hover {
			background-color: rgba(212, 185, 153, 0.05);
		}
	}


	/* 退出按钮 */
	.logout-container {
		margin: 0 30rpx 40rpx;

		.logout-btn {
			height: 90rpx;
			line-height: 90rpx;
			background-color: var(--card-bg);
			color: var(--text-light);
			font-size: 32rpx;
			border-radius: 12rpx;
			border: 1rpx solid rgba(140, 123, 110, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;

			uni-icons {
				margin-left: 12rpx;
			}

			&::after {
				border: none;
			}

			&:active {
				background-color: rgba(140, 123, 110, 0.05);
			}
		}
	}

	/* 弹窗样式 */
	.popup-content {
		padding: 40rpx;
		background-color: var(--card-bg);
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}

	.popup-header {
		margin-bottom: 40rpx;
		text-align: center;

		.popup-title {
			font-size: 36rpx;
			color: var(--text-dark);
			font-weight: 600;
			display: block;
			margin-bottom: 8rpx;
		}

		.popup-subtitle {
			font-size: 26rpx;
			color: var(--text-light);
		}
	}

	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;

		.label {
			font-size: 28rpx;
			color: var(--text-dark);
			margin-bottom: 20rpx;
		}

		.avatar-button {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			padding: 0;
			margin: 0;
			background: transparent;
			border: none;

			.avatar-preview {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #f0e6dc;
				border: 2rpx solid var(--secondary-color);
			}

			.avatar-edit {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				width: 48rpx;
				height: 48rpx;
				background-color: var(--primary-color);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid #fff;
			}
		}
	}

	.nickname-section {
		.label {
			font-size: 28rpx;
			color: var(--text-dark);
			margin-bottom: 20rpx;
			display: block;
		}

		.nickname-input {
			width: 100%;
			height: 80rpx;
			padding: 0 24rpx;
			border: 1rpx solid var(--secondary-color);
			border-radius: 12rpx;
			font-size: 28rpx;
			background-color: var(--card-bg);
			color: var(--text-dark);
			box-sizing: border-box;

			&:focus {
				border-color: var(--primary-color);
			}
		}
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		margin-top: 40rpx;

		.cancel-btn,
		.submit-btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			transition: all 0.2s;
		}

		.cancel-btn {
			background-color: rgba(140, 123, 110, 0.1);
			color: var(--text-light);

			&:active {
				background-color: rgba(140, 123, 110, 0.2);
			}
		}

		.submit-btn {
			background-color: var(--primary-color);
			color: #fff;

			&:active {
				background-color: var(--text-dark);
			}
		}
	}
</style>